<template>
<div>
<!--tab部分-->
 <div class="nav boder4 fix">
        <div class="titleBox none">
            <p class="bold16"> {{title}}</p>
        </div>
        <div class="">
                    <div class="navs">
                        <div class="na" @click="getExperts(lis.itemKey)" v-for="lis in tabList"><p>{{lis.itemValue}}</p>  </div>
                    </div>
        </div>
    </div>
<!--詳情部分-->
    <div class="exper">
        <div class="center fix flexWrap">
            <div class="listBoxs" v-for="lis in docterList">
                <div class="listBox">
                    <div class="imgBox">
                        <img :src="lis.avatar">
                    </div>
                    <div class="boxTitle">
                        <p>{{lis.name}} &nbsp;&nbsp;|&nbsp;&nbsp; {{lis.duty}}  </p>
                        <!--<div class="fix botBox" >
                            <div class="bot" v-for=" bot in lis.doctorGroups">{{bot.bdItemKey | diseaseFilter}}</div>
                        </div>-->
                        <p class="shool">{{lis.organizationOrigin}}</p>
                        <p class="conp"><label>擅长：</label>&nbsp;&nbsp;&nbsp;&nbsp;{{lis.goodAt}}  </p>
                    </div>
                    <div class="vandMag fix ">
                        <div class="span5">
                            <p class="vdio text">视频面诊<span class="redNuber">{{lis.videoFee}}/次</span></p>
                        </div>
                        <div class="span5">
                            <p class="adio text">视频面诊<span class="redNuber">{{lis.normalFee}}/次</span></p>
                        </div>
                    </div>
                    <div class="">
                        <div class="botByYue">
                            预 约
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 <!--分頁按鈕-->
 <nav aria-label="...">
  <ul class="pager">
    <li v-show='pagingBtn' @click="previous"><a href="javascript:;">上一頁</a></li>
    <li v-show="pagingBtn" @click="next"><a href="javascript:;">下一頁</a></li>
  </ul>
</nav>

</div>
</template>
<style scoped>
    .imgBox{
      width:100px;
      height:100px;

    }
    .imgBox img{
      width:100%;
      height:100%;
        border-radius:50%;
    }
    .bot{
        background:white;
        border:solid 1px #6886D4;
        height:26px;
    }
    .shool{
        font-size:15px;
        color:#999999;
    }
    .conp{
        font-size:15px !important;
        color:#999999 !important;
    }
    .conp label{
         font-size:15px !important;
        color:#999999 !important;
    }

</style>
<script>
   import bus from '../../common/common.js'

    export default {
        created(){
            // 獲取tab
     this.getList();
    //  獲取醫生列表
    this.getExperts('expect_group');
        },
        name: 'ExpertList',
        data:function() {
            return{
               list:[
                   {   "docterId":"1",
                       "docterImg":"",
                       "docterName":"湖大1",
                       "hospital":"北京大学人民医院",
                       "job":"主任医师",
                       goodDing:[
                           {"styl":"心电生理" },{"styl":"冠心血管" },{"styl":"皮肤病" }
                       ],
                       "centText":"心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病",
                       "precOfVdio":500,
                       "precOfAdio":200
                   },
                   {   "docterId":"1",
                       "docterImg":"",
                       "docterName":"湖大1",
                       "hospital":"北京大学人民医院",
                       "job":"主任医师",
                       goodDing:[
                           {"styl":"心电生理" },{"styl":"冠心血管" },{"styl":"皮肤病" }
                       ],
                       "centText":"心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病",
                       "precOfVdio":500,
                       "precOfAdio":200
                   },
                   {   "docterId":"1",
                       "docterImg":"",
                       "docterName":"湖大1",
                       "hospital":"北京大学人民医院",
                       "job":"主任医师",
                       goodDing:[
                           {"styl":"心电生理" },{"styl":"冠心血管" },{"styl":"皮肤病" }
                       ],
                       "centText":"心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病",
                       "precOfVdio":500,
                       "precOfAdio":200
                   },
                   {   "docterId":"1",
                       "docterImg":"",
                       "docterName":"湖大1",
                       "hospital":"北京大学人民医院",
                       "job":"主任医师",
                       goodDing:[
                           {"styl":"心电生理" },{"styl":"冠心血管" },{"styl":"皮肤病" }
                       ],
                       "centText":"心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病",
                       "precOfVdio":500,
                       "precOfAdio":200
                   },
                     {   "docterId":"1",
                       "docterImg":"",
                       "docterName":"湖大1",
                       "hospital":"北京大学人民医院",
                       "job":"主任医师",
                       goodDing:[
                           {"styl":"心电生理" },{"styl":"冠心血管" },{"styl":"皮肤病" }
                       ],
                       "centText":"心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病",
                       "precOfVdio":500,
                       "precOfAdio":200
                   },
                     {   "docterId":"1",
                       "docterImg":"",
                       "docterName":"湖大1",
                       "hospital":"北京大学人民医院",
                       "job":"主任医师",
                       goodDing:[
                           {"styl":"心电生理" },{"styl":"冠心血管" },{"styl":"皮肤病" }
                       ],
                       "centText":"心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病",
                       "precOfVdio":500,
                       "precOfAdio":200
                   },
                     {   "docterId":"1",
                       "docterImg":"",
                       "docterName":"湖大1",
                       "hospital":"北京大学人民医院",
                       "job":"主任医师",
                       goodDing:[
                           {"styl":"心电生理" },{"styl":"冠心血管" },{"styl":"皮肤病" }
                       ],
                       "centText":"心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病",
                       "precOfVdio":500,
                       "precOfAdio":200
                   },
                     {   "docterId":"1",
                       "docterImg":"",
                       "docterName":"湖大1",
                       "hospital":"北京大学人民医院",
                       "job":"主任医师",
                       goodDing:[
                           {"styl":"心电生理" },{"styl":"冠心血管" },{"styl":"皮肤病" }
                       ],
                       "centText":"心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病心电生里冠心血管皮肤病皮肤病",
                       "precOfVdio":500,
                       "precOfAdio":200
                   }
               ],
               expertList:[],
                    "title":"专家在线",
                tabList:[],
                Authorization:'',
                docterList:[],
                pagingBtn:true,
                index:0,
                total:0
            }
        },
           methods: {
            // tab列表
            getList(){
                var url='/api/basic/basicDicts/expect_group/list';
                 this.Authorization=localStorage.getItem('access_token')
                // console.log(Authorization)
                this.$http.get(url, {
                    headers: {
          Authorization: 'bearer '+ this.Authorization,
                    }
                }).then(function(res){
                    this.tabList=res.body
                    res.body.unshift({itemValue:'全部',itemKey:'expect_group'})
                })
            },
        //    醫生詳細列表
            getExperts(itemKey){
                localStorage.setItem('itemKey',itemKey)
                 var url='/api/organization/employees/'+itemKey+'/list';
                 this.$http.get(url,{
                    headers:{
                         Authorization: 'bearer '+ this.Authorization,
                    }
                 }).then(function(res){
                     this.total=Math.ceil(res.body.length/8);
                     console.log(this.total)
                     if(res.body.length>8){
                         res.body=res.body.slice(this.index,8+this.index);
                          this.pagingBtn=true;
                     }else{
                         this.pagingBtn=false;
                     }
                    this.docterList=res.body
                 })
            },
            // 上一頁
            previous(){
                if(this.index==0){
                    return
                }
                this.index=this.index-8;
                var itemKey=localStorage.getItem('itemKey')
                this.getExperts(itemKey)
            },
            // 下一頁
            next(){
                if(this.index>=(this.total-1)*8){
                   return
                }
                this.index=this.index+8;
                var itemKey=localStorage.getItem('itemKey')
                this.getExperts(itemKey)
            }
        },
        computed: {
            ChildByNavToList: function () {

            }
        }
    }
</script>
